<template>
  <div class="panel">
    <brokenLine :lineType="lineType"></brokenLine>
    <el-row :gutter="20">
      <el-col :span="14" class="relative">
        <el-form
          class="head mt10 pt10"
          ref="proContrastForm"
          :model="proContrastForm"
          label-width="40px"
          v-if="showContrastCF"
          style="width: 85%;"
        >
          <el-row>
            <el-col :span="8" :offset="4">
              <el-form-item label="时间">
                <div class="block time-filter">
                  <el-date-picker
                    v-model="proContrastForm.time"
                    type="daterange"
                    align="left"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions2"
                    value-format="yyyy-MM-dd"
                    size="mini"
                    @change="handleProContrast"
                  ></el-date-picker>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="渠道">
                <el-select
                  v-model="proContrastForm.promotions"
                  multiple
                  collapse-tags
                  placeholder="筛选渠道"
                  @change="handleProContrast"
                >
                  <el-option v-for="item in promotionList" :key="item" :label="item" :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="类型">
                <el-select
                  v-model="proContrastForm.type"
                  placeholder="筛选类型"
                  @change="handleProContrast"
                >
                  <el-option label="上门" value="visit"></el-option>
                  <el-option label="分配" value="amount"></el-option>
                  <el-option label="签单" value="sign"></el-option>
                  <el-option label="提车" value="pickCar"></el-option>
                  <el-option label="收费" value="charge"></el-option>
                  <el-option label="市场费用" value="cost"></el-option>
                  <el-option label="电话成本" value="phoneCost"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="filter-btn pointer" @click="handleSwitchContrastCF">
          <i class="fa fa-filter fa-2x filter" aria-hidden="true" style="color: #409EFF;"></i>
          <span style="color: #409EFF;" class="fs16">过滤</span>
        </div>
        <div class="grid-content-center bg-purple pt20 pl15" id="promotion"></div>
      </el-col>
      <funnel
        :promotionList="promotionList"
        :centerList="centerList"
        :funnelItem="funnelItem"
        :funnelTitle="funnelTitle"
      ></funnel>
    </el-row>
    <bar
      :promotionList="promotionList"
      :centerList="centerList"
      :deptList1="deptList1"
      :depts1="depts1"
      ref="bar"
    ></bar>
    <pie :pieType="pieType"></pie>
  </div>
</template>

<script>
import { option5, pickerOptions2 } from "@/../config/Stats_options";
import { getMonthStartDate, getMonthEndDate } from "@/utils/getCurrMonth";
import pie from "@/components/pie";
import bar from "@/components/bar";
import funnel from "@/components/funnel";
import brokenLine from "@/components/brokenLine";

export default {
  name: "statistics",
  data() {
    return {
      proContrastForm: {
        time: [getMonthStartDate(), getMonthEndDate()],
        promotions: [],
        type: "visit"
      },
      pieType: ["distribution", "reason-notsign"],
      lineType: ["_package", "visit", "sign", "finances", "pickCarA"],
      centerDeptFilter: false,
      showContrastCF: false,
      promotionList: [],
      centerList: [],
      deptList: [],
      deptList1: [],
      depts1: [],
      funnelTitle: "渠道转化",
      pickerOptions2,
      funnelItem: [
        { value: 0, name: "分配数量" },
        { value: 0, name: "上门数量" },
        { value: 0, name: "签单数量" },
        { value: 0, name: "进件数量" },
        { value: 0, name: "提车数量" }
      ]
    };
  },
  mounted() {
    this.getPromotionList();
    this.getCenterList();
    this.handleProContrast();
  },
  methods: {
    handleSwitchContrastCF() {
      this.showContrastCF = !this.showContrastCF;
    },
    handleProContrast() {
      option5.xAxis.data = [];
      option5.series[0].data = [];
      this.$axios
        .post("/api/statistics/Stats_ProContrast", {
          from: this.proContrastForm.time[0],
          to: this.proContrastForm.time[1],
          promotions: this.proContrastForm.promotions,
          type: this.proContrastForm.type
        })
        .then(data => {
          option5.xAxis.data = data.xAxis;
          option5.series[0].data = data.sum;
          option5.series[0].name = data.name;
        })
        .then(() => {
          this.updateProContrast();
        });
    },
    handleShowCD() {
      this.centerDeptFilter = !this.centerDeptFilter;
    },
    getCenterList() {
      this.$axios
        .get("/api/system/centers")
        .then(data => {
          this.centerList = data.map(item => {
            return item.name;
          });
        })
        .then(() => {
          this.getDeptList1();
        });
    },
    getDeptList1() {
      this.deptList1 = [];
      const promises = [];
      this.centerList.forEach(item => {
        const promise = new Promise(resolve => {
          resolve(
            this.$axios
              .post("/api/system/departmentList", { center: item })
              .then(data => {
                data.forEach(element => {
                  element.name = item + "[" + element.name + "]";
                  this.depts1.push(element.name);
                });
                this.deptList1.push(data);
              })
          );
        });
        promises.push(promise);
      });
      Promise.all(promises).then(() => {
        this.$refs.bar.handleCenterDept();
      });
    },
    getPromotionList() {
      this.$axios.get("/api/system/promotions").then(data => {
        this.promotionList = data.map(item => {
          return item.name;
        });
        this.proContrastForm.promotions = this.promotionList;
      });
    },
    updateProContrast() {
      let promotion = this.$echarts.init(document.getElementById("promotion"));
      promotion.setOption(option5, true);
    }
  },
  components: {
    pie,
    bar,
    brokenLine,
    funnel
  }
};
</script>
<style>
</style>